<template>
  <van-popup
    :show="show"
    position="bottom"
    custom-style="height: 30%;overflow: hidden;"
    @close="onClose"
  >
  <van-picker :columns="countrys" @change="onChange" show-toolbar @confirm="confirm" @cancel="cancel"></van-picker>
  </van-popup>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            countrys: ['英国', '澳大利亚', '新西兰', '加拿大', '新加坡', '日本'],
            selectedVal: ''
        }
    },
    methods: {
        onChange(event) {
            const { picker, value, index } = event.mp.detail;
            this.selectedVal = value;
        },
        confirm() {
            this.$emit('confirm', this.selectedVal);
        },
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="less">
</style>